<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>音乐播放器</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/home.css" />
  <link rel="stylesheet" href="./css/recommendList.css">
  <link rel="stylesheet" href="./css/player.css">
  <script src="./assets/iconfont.js"></script>
</head>

<body>
  <div class="wrapper d-flex  flex-column">
    <header class="header" id="header-title">
      <a href="#home"> 推荐页</a>
    </header>
    <section id="app" class="content">
      <!-- 此处为中间内容，通过 js 动态生成 -->
    </section>
    <section class="player-control d-flex justify-content-start ">
      <div class="player-control-songinfo d-flex justify-content-start">
        <!-- 新添加 a 标签进行页面跳转 -->
        <a class="img pointer" href="#/player/:167882" id="playerCover">
          <img src="" alt="">
        </a>
        <a class="img pointer display-none" href="#/recommendList/:3136952023" id="playerCoverBack">
          <img src="" alt="">
        </a>
        <div class="songinfo d-flex flex-column align-items-start">
          <span class="songname multi-text-omitted">歌曲一</span>
          <span class="single-text-omitted singer">歌手2323232323232</span>
        </div>
      </div>
      <div class="player-control-unit d-flex justify-content-between">
        <div class="control">
          <!-- 新增加上一首的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id="player-prev">
            <use xlink:href="#icon-shangyiqu"></use>
          </svg>
          <!-- 新增加播放暂停的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id='player-control'>
            <use xlink:href="#icon-zanting"></use>
          </svg>
          <!-- 新增加下一首的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id="player-next">
            <use xlink:href="#icon-xiayiqu"></use>
          </svg>
        </div>
        <div class="d-flex justify-content-between">
          <div class="song-progress d-flex justify-content-between">
            <span class="current-time">00:00</span>
            <div class="progress" id="progress-bar">
              <div class="progress-bar"></div>
              <div class="progress-dot"></div>
            </div>
            <span class="total-time">00:00</span>
          </div>
          <div class="volume d-flex">
            <svg class="icon volume-icon" aria-hidden="true">
              <use xlink:href="#icon-yinliang"></use>
            </svg>
            <div class="progress" id="volume-bar">
              <div class="progress-bar"></div>
              <div class="progress-dot"></div>
            </div>
          </div>
        </div>
        <div class="list">
          <!-- 新增加播放模式的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id="musicMode">
            <use xlink:href="#icon-liebiaoxunhuan"></use>
          </svg>
          <!-- 新增加播放列表的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id='playerList'>
            <use xlink:href="#icon-bofangliebiao"></use>
          </svg>
        </div>
      </div>
    </section>
    <!-- 新增播放列表 -->
    <section class="player-list display-none">
      <h3 class="player-list-title">播放列表</h3>
      <ul class="player-list-ul">
      </ul>
    </section>
  </div>
  <!-- 新添加音频 -->
  <audio src="" id="myAudio"></audio>
  <script src="./js/index.js" type="module"></script>
</body>

</html>